<template>
  <div class="app-container">
    <el-drawer :modal-append-to-body="false" :append-to-body="true" title="添加供应商结算" size="72%" :withHeader="false"
      :visible.sync="gradeDialogGrouping" :show-close="true">
      <div style="position: relative">
        <div class="drawerTitle">
          <span>添加供应商结算</span>
          <div class="close" @click="gradeCloseDialogGrouping">
            <i class="el-icon-close" style="font-size: 24px;"></i>
          </div>
        </div>
      </div>
      <el-alert id="prompt_explanation" class="prompt_explanation"
        title="说明：供货商结算以实际结算为主,系统只是记录结算对象以及结算范围.方便财务人员核对结算明细,财务人员在结算时需要核对明细后于供货商进行核对结算;结算时间范围:只结算已过售后期并且是无售后期的订单."
        type="warning" :closable="false">
      </el-alert>
      <el-scrollbar wrap-style="overflow-x:hidden;" style="height: calc(100vh - 200px)">
        <div class="marginTop">
          <el-form ref="ruleForm" status-icon :rules="rules" :model="ruleForm" label-width="100px"
            class="demo-ruleForm">
            <el-row>
              <el-col :span="11">
                <el-form-item label="供货商" prop="supplier_id">
                  <el-select style="width: 100%" clearable v-model="ruleForm.supplier_id" filterable
                    @change="supliername" placeholder="请输入供货商名称搜索">
                    <el-option v-for="item in options" :key="item.id" :label="item.supplier_name" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="结算时间">
                  <el-date-picker @change="supliertime" v-model="searchFormtime" clearable value-format="yyyy-MM-dd"
                    type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="11">
                <el-form-item label="结算类型" prop="settle_type">
                  <el-radio v-model="ruleForm.settle_type" :label="1">对公结算</el-radio>
                  <el-radio v-model="ruleForm.settle_type" :label="2">对私结算</el-radio>
                  <el-radio v-model="ruleForm.settle_type" :label="3">其他</el-radio>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="结算金额" prop="experience">
                  <el-input type="text" placeholder="选择供应商和结算时间后自动查询" style="width: 260px;" disabled v-model="ruleForm.experience"></el-input>
                  <el-button type="text" style="margin-left: 10px;" @click="settlement_details">明细</el-button>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="11">
                <el-form-item label="付款凭证" prop="pay_proof">
                  <logo-upload :single-file="iconFile" :show-file-list="false" accept="image/jpeg, image/png"
                    @uploadCallback="logoCallback" />
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="结算单据" prop="document">
                  <logo-upload :single-file="iconBackground" :show-file-list="false" accept="image/jpeg, image/png"
                    @uploadCallback="backgroundCallback" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="21">
                <el-form-item label="结算备注" prop="remarks">
                  <el-input type="textarea" maxlength="200" show-word-limit :autosize="{ minRows: 4, maxRows: 4 }"
                    placeholder="请输入内容" v-model="ruleForm.remarks">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-scrollbar>
      <div>
        <el-row style="margin: 20px 0">
          <el-col :span="24" style="text-align: right; padding-right: 30px;">
            <el-button @click="gradeCloseDialogGrouping">取消</el-button>
            <el-button :loading="submitLoading" type="primary" @click="submitForm('ruleForm')">保存</el-button>
          </el-col>
        </el-row>
      </div>
    </el-drawer>
    <moneydetail ref="refmoney"/>
  </div>
</template>

<script>
  import {
    supplierLists,
  } from "@/api/supplier/index";
  import {
    settlepreview,
    suppliersubmit,
    orderList
  } from "@/api/supliersettent/index";
  import moneydetail from './moneydetail.vue'
  import LogoUpload from "@/components/FileUpload";
  export default {
    components: {
      LogoUpload,
      moneydetail
    },
    name: "Grouping",
    data() {
      return {
        orderlists: [], //明细订单列表
        options: [], //搜索供应商
        loading: false,
        gradeDialogGrouping: false,
        searchFormtime: [], //时间选择
        total: 0,
        params: {
          ids: []
        }, //查看明细传参
        // 提交参数
        ruleForm: {
          supplier_id: "",
          experience: "",
          pay_proof: "", //付款凭证
          document: "", //结算单
          settle_type: 1,
          remarks: "",
          batch_number: '',
          start_time: '',
          end_time: ''
        },
        // 会员图标回显
        iconFile: {},
        // 图标背景
        iconBackground: {},
        submitLoading: false,
        rules: {
          settle_type: [{
            required: true,
            message: "请选择结算类型",
            trigger: "blur"
          }],
          experience: [{
            required: true,
            message: "请选择供应商和时间查询结算金额",
            trigger: "blur"
          }],
          remarks: [{
            required: true,
            message: "请输入备注",
            trigger: "blur"
          }],
          supplier_id: [{
            required: true,
            message: "请选择供应商",
            trigger: "change"
          }, ],
          pay_proof: [{
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                return callback(new Error("请上传付款凭证"));
              }
              callback();
            },
            trigger: "blur",
          }, ],
          document: [{
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                return callback(new Error("请上传结算单据"));
              }
              callback();
            },
            trigger: "blur",
          }, ],
        },
      };
    },
    created() {
      this.SupplierLists();
    },
    methods: {
      //查看明细
      settlement_details() {
        if (this.params.ids && this.params.ids.length > 0) {
          this.$refs.refmoney.open(this.params.ids,this.suplierId)
        } else {
          this.$messages.warning('请先查询供应商结算金额');
        }
      },
      //选取供应商后调起结算金额接口
      supliername(e) {
        this.suplierId = e
        if (e && this.searchFormtime.length > 0) {
          settlepreview({
              supplier_id: this.suplierId,
              start_time: this.searchFormtime[0],
              end_time: this.searchFormtime[1]
            })
            .then((res) => {
              if (res.code !== 200 && res.status !== 1) {
                this.$messages.error(res.msg);
                return;
              }
              this.ruleForm.experience = res.data.total_price
              this.params.ids = res.data.order_ids
              this.ruleForm.batch_number = res.data.batch_number
            })
            .catch(() => {})
        }
      },
      supliertime(e) {
        this.searchFormtime = e
        this.ruleForm.start_time = e[0]
        this.ruleForm.end_time = e[1]
        if (this.searchFormtime.length > 0 && this.suplierId) {
          settlepreview({
              supplier_id: this.suplierId,
              start_time: this.searchFormtime[0],
              end_time: this.searchFormtime[1]
            })
            .then((res) => {
              if (res.code !== 200 && res.status !== 1) {
                this.$messages.error(res.msg);
                return;
              }
              this.params.ids = res.data.order_ids
              this.ruleForm.experience = res.data.total_price
              this.ruleForm.batch_number = res.data.batch_number
            })
            .catch(() => {})
        }
      },
      // 关闭弹框
      gradeCloseDialogGrouping() {
        this.params.ids = []
        this.searchFormtime = []
        this.$nextTick(() => {
          this.$refs.ruleForm.resetFields();
        });
        this.$refs.ruleForm.clearValidate();
        this.gradeDialogGrouping = false
        setTimeout(() => {
          this.$parent.getListWay();
        }, 500);
      },
      open() {
        this.gradeDialogGrouping = true
      },
      // 提交
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.submitLoading = true
            suppliersubmit(this.ruleForm)
              .then((res) => {
                if (res.code !== 200 && res.status !== 1) {
                  this.submitLoading = false
                  this.$messages.error(res.msg);
                  return;
                }
                this.submitLoading = false
                this.$messages.success('添加成功');
                setTimeout(() => {
                  this.gradeCloseDialogGrouping()
                }, 500)
              })
              .catch(() => {})

          } else {
            return false;
          }
        });
      },
      //供应商列表
      SupplierLists() {
        supplierLists().then((res) => {
          this.options = res.data;
        });
      },
      handleSizeChange(val) {
        this.searchForm.count = val;
        this.getListWay();
      },
      handleCurrentChange(val) {
        this.searchForm.page = val;
        this.getListWay();
      },
      logoCallback(singleFile) {
        this.iconFile = singleFile;
        this.ruleForm.pay_proof = singleFile.url;
      },
      backgroundCallback(singleFile) {
        this.iconBackground = singleFile;
        this.ruleForm.document = singleFile.url;
      },
    },
  };
</script>

<style lang="scss">
  img {
    width: 100%;
    height: 100%;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 78px;
    height: 78px;
    line-height: 78px;
    text-align: center;
  }

  .avatar {
    width: 78px;
    height: 78px;
    display: block;
  }
</style>
